<template>
  <div style="margin-bottom:10px;">
    <el-form
      ref="searchKey"
      :inline="true"
      :model="searchKey"
      :show-message="false"
      :inline-message="true"
      label-position="left"
      label-width="80px"
      :rules="rules"
    >

      <el-form-item label="部门名称:" prop="deptName" label-width="80px">
        <el-input
          v-model="searchKey.deptName"
          size="small"
          clearable
          placeholder="请输入名称"
          style="width: 150px;"
        />
      </el-form-item>

      <el-form-item label="薪资月份" prop="salaryMonth">
        <el-date-picker
          v-model="searchKey.salaryMonth"
          clearable
          size="small"
          style="width: 200px;"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月份"
        />
      </el-form-item>

      <el-form-item label="制作进度:" prop="salaryStatus">
        <el-select
          v-model="searchKey.salaryStatus"
          size="small"
          clearable
          placeholder="选择制作进度"
          style="width: 220px"
        >
          <el-option label="未制作" :value="'null'" />
          <el-option label="制作中" :value="0" />
          <el-option label="审批中" :value="10" />
          <el-option label="审批通过" :value="20" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { debounce } from 'lodash'

export default {
  name: 'DepartmentSearch',
  components: {},
  mixins: [],
  props: {
    initParams: { // 初始参数
      type: Object,
      required: true,
      default() {
        return {}
      }
    },
    searchParams: { // 搜索参数
      type: Object,
      required: true,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 表单校验
      rules: {
        salaryMonth: [
          { required: true, message: '薪资月份不能为空', trigger: 'blur' }
        ]
      },
      chooseMonth: '',
      isShowFilter: false, // 是否显示搜索
      searchKey: {},
      enabledTypeOptions: [
        { name: '启用', value: '0' },
        { name: '停用', value: '1' }
      ]
    }
  },
  computed: {},
  methods: {
    resetSearchData() { // 重置表单
      this.searchKey = {
        ...JSON.parse(JSON.stringify(this.initParams)),
        ...{
          size: this.searchKey.size
        }
      }
      console.log(this.searchKey)

      this.$emit('on-init', this.searchKey)
    },
    handleFilter: debounce(function() { // 查询，防抖
      this.$refs['searchKey'].validate(valid => {
        if (valid) {
          this.searchKey.page = 1
          this.$emit('on-init', this.searchKey)
        } else {
          this.msgError('请选择薪资月份！')
        }
      })
    }, 300),
    handleReset: debounce(function() { // 重置查询，防抖
      this.resetSearchData()
    }, 300),
    async initData() { // 初始化数据
    }
  },
  watch: {
    searchParams: {
      handler: function(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(this.searchKey)) {
          this.searchKey = JSON.parse(JSON.stringify(newVal))
        }
      },
      immediate: true
    }
  },
  created() {
    var that = this
    setTimeout(function() {
      that.searchKey = {
        ...JSON.parse(JSON.stringify(that.initParams))
      }
    }, 40)
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>

</style>
